<script setup lang="ts">
import { useDark } from "@vueuse/core";
import { ref, onMounted, onUnmounted, defineProps } from "vue";
const isDark = useDark();
const { title, loadingTxt } = defineProps({
  title: String,
  loadingTxt: String,
});
const dots = ref("...");
const isVisible = ref(true);
const scale = ref(1);
const colorIndex = ref(0);
const yPos = ref(0);

const darkColors = ["#4CAF50", "#2196F3", "#9C27B0", "#FF9800"];
const lightColors = ["#FF1744", "#00E5FF", "#76FF03", "#D500F9"];

let dotsInterval: number;
let blinkInterval: number;
let scaleInterval: number;
let colorInterval: number;
let bounceInterval: number;

onMounted(() => {
  // 控制点动画
  dotsInterval = setInterval(() => {
    dots.value = dots.value.length >= 3 ? "" : dots.value + ".";
  }, 500);

  // 控制文字闪烁
  blinkInterval = setInterval(() => {
    isVisible.value = !isVisible.value;
  }, 1500);

  // 控制轻微缩放
  scaleInterval = setInterval(() => {
    scale.value = scale.value === 1 ? 1.05 : 1;
  }, 1000);

  // 控制颜色变化
  colorInterval = setInterval(() => {
    colorIndex.value = isDark.value
      ? (colorIndex.value + 1) % darkColors.length
      : (colorIndex.value + 1) % lightColors.length;
  }, 2000);

  // 控制上下浮动
  bounceInterval = setInterval(() => {
    yPos.value = yPos.value === 0 ? -3 : 0;
  }, 800);
});

onUnmounted(() => {
  clearInterval(dotsInterval);
  clearInterval(blinkInterval);
  clearInterval(scaleInterval);
  clearInterval(colorInterval);
  clearInterval(bounceInterval);
});
</script>

<template>
  <!-- 加载层 -->
  <div class="loading-layer">
    <div class="content-box">
      <img v-if="isDark" class="loading-gif" src="@/assets/gif/loading_dark.gif" />
      <img v-else class="loading-gif" src="@/assets/gif/loading_light.gif" />
      <div class="txt-box">
        <div style="display: flex">
          <div class="left-box"></div>
          <span class="center-txt" :style="{
            opacity: isVisible ? 1 : 0.7,
            transform: `scale(${scale}) translateY(${yPos}px)`,
          }">{{ !title ? "Yu Admin" : title }}
          </span>
          <div class="right-box"></div>
          <span>🗡😇</span>
        </div>
        <span class="loading-b-txt" :style="{
          color: isDark ? darkColors[colorIndex] : lightColors[colorIndex],
          transform: `translateY(${yPos}px)`,
        }">{{ !loadingTxt ? "加载中" : loadingTxt }}{{ dots }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.loading-layer {
  position: fixed;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--el-bg-color-overlay);

  .content-box {
    position: relative;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 40px;
    border-radius: 15px;
    background: var(--el-bg-color-page);
    // background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 15px rgba(4, 201, 4, 0.3);
    transition: all 0.5s ease;

    /* 光晕效果 */
    &::before {
      content: "";
      position: absolute;
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
      border-radius: 20px;
      background: linear-gradient(45deg, #4caf50, #2196f3, #9c27b0, #ff9800);
      background-size: 400% 400%;
      z-index: -1;
      filter: blur(20px);
      opacity: 0.5;
      animation: glow 8s ease infinite;
    }

    .loading-gif {
      width: 100px;
      animation: float 2s ease-in-out infinite;
    }

    .txt-box {
      margin-top: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      font-size: 18px;

      .left-box {
        width: 10px;
        height: 20px;
        border-radius: 5px 0 0 5px;
        background-color: #dfdedef8;
        transition: all 0.3s ease;
      }

      .center-txt {
        font-weight: 700;
        margin: 0 5px;
        border-top: 1px dashed;
        border-bottom: 1px dashed;
        transition: all 0.5s ease;
      }

      .right-box {
        width: 10px;
        height: 20px;
        border-radius: 0 5px 5px 0;
        background-color: rgb(4, 201, 4);
        transition: all 0.3s ease;
      }

      .loading-b-txt {
        margin-top: 5px;
        font-weight: 700;
        transition: all 0.5s ease;
      }
    }
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@keyframes glow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}
</style>
